<template>
    <div class="main">
        <div class="top">
            <!-- Form -->
              <el-button type="primary" @click="dialogFormVisible = true">+添加设置</el-button>
              <el-dialog title="添加设置" :visible.sync="dialogFormVisible" center>
                <el-form :model="form">
                  <el-form-item label="可分配资金（万）:" :label-width="formLabelWidth">
                    <el-input v-model="form.funds" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="参与人数：" :label-width="formLabelWidth">
                    <el-input v-model="form.joinpeople" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="入围人数：" :label-width="formLabelWidth">
                    <el-input v-model="form.snumb" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="入围限制：" :label-width="formLabelWidth">
                    销售<el-input v-model="form.x" autocomplete="off"  style="width:50px;margin:0 5px;"></el-input>张，获得一个名额
                  </el-form-item>
                  <el-form-item >
                      <div class="block">
                        <el-date-picker  v-model="value2" type="daterange" align="right"
                          unlink-panels range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                      </div>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
              </el-dialog>
        </div>
        <div class="mid">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="可分配资金" prop="dfund" ></el-table-column>
                <el-table-column label="参与人数" prop="joinpeople"></el-table-column>
                <el-table-column label="入围人数" prop="snumb"></el-table-column>
                <el-table-column label="有效期" prop="termva"></el-table-column>
                <el-table-column label="添加时间" prop="addtime"></el-table-column>
                <el-table-column label="结束时间" prop="endtime"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="btnDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
                                :page-sizes="[4,8]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="3">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.main{
    padding: 0;
    margin: 0;
    display: block;
    text-align: center;
}
form{
  display: block;
  margin-top: 0em;
}
.el-aside, .el-main{
  text-align: center;
}
.top{
    text-align: left;
    padding: 20px 40px;
}

.el-pagination{
  text-align: center;
  margin-top: 20px;
}
//一下是控制弹出表单的样式内容
.el-dialog__title{
  line-height: 24px;
  font-size: 18px;
  color: #303133;
}
.el-dialog__header{
  padding: 20px 20px 10px;
}

.el-dialog__body{
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.el-form-item{
  margin-bottom: 22px;
}
.el-input{
  width: 400px;
}
.el-input__inner{
  height: 36px;
  line-height: 36px;
}
.el-date-editor{
  text-align: center;
  margin-left: 200px;
}
.el-form-item__content{
  line-height: 40px;
  position: relative;
  font-size: 14px;
  padding: 30px 20px;
  color: #606266;
  word-break: break-all;
}
</style>

<script>
export default {
      data() {
      return {
        currentPage4: 4,
        //以下应该导入设置中的账户信息
        tableData: [{ dfund:'10',joinpeople:'5',snumb:'1',termva:'2021-06-11-2021-07-23',addtime:'1623207034',endtime:'2021-07-23',},{
                      dfund:'132',joinpeople:'567',snumb:'23',termva:'2021-06-11-2021-07-23',addtime:'1623208534',endtime:'2021-07-23',},{
                      dfund:'245',joinpeople:'42',snumb:'223',termva:'2021-06-11-2021-07-23',addtime:'1623208552',endtime:'2021-07-23',},{
                      dfund:'100',joinpeople:'30',snumb:'20',termva:'2021-06-16-2021-07-23',addtime:'1623238867',endtime:'2021-07-23'
        }],
        dialogFormVisible: false,
        form: {funds: '',joinpeople:'',snumb:'',x:'',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},
        formLabelWidth: '200px',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(row) {
        console.log(`当前页: ${row}`);
      },
      btnDelete(index, row) {
                console.log(index, row);
                this.$confirm(`是否删除该条记录？`, '删除', {
                    confirmButtonText: '确定',
                }).then(() => {
                    let res = this.tableData.splice(index, 1)
                    let msg = `删除成功`
                    if (!res) {
                        msg = `删除失败`
                    }
                    this.$message({
                        type: 'info',
                        message: msg
                    });
                })
            }
    }
}
</script>